<template lang="pug">
  .pendant-newtpl.pos-a.animated.bounceInLeft
    .extra(v-if="isShowPraise")
      .item
        span.icon 人气：
          | {{getFormatSeeCount}}
      .item
        span.icon() 点赞：
          | {{getPraiseCount}}
    Weather(v-if="isShowWeather")

    .pano-desc
      //- h3 {{getPanoInfo.pano_name}}
      p.omit2 {{getPanoInfo.pano_dec}}
    Pendant.pendant-old
</template>

<script>
// 天气
import Weather from 'Comps/Weather'
import Pendant from 'Comps/Pendant'
import { mapGetters } from 'vuex'
import { isMobile } from '@/utils'
import { visibleCompass } from '@/utils/krpano'

import {
  visiblePraise,
  visibleWeather
} from '@/utils/krpano'
let timer

export default {
  data() {
    return {
      countUnit: 10000
    }
  },
  components: {
    Weather,
    Pendant
  },
  computed: {
    ...mapGetters(['panoInfo', 'praiseCount']),
    getFormatSeeCount() {
      if(this.panoInfo) {

        return this.panoInfo.seecount > this.countUnit
          ? Number(this.panoInfo.seecount/this.countUnit).toFixed(1) + 'w'
          : this.panoInfo.seecount
      }
    },
    getPraiseCount() {
      if(this.praiseCount) {
        return this.praiseCount
      }
      return 0
    },
    isShowPraise() {
      return visiblePraise()
    },
    isShowWeather() {
      return isMobile() && visibleWeather()
    },
    getPanoInfo() {
      if(this.panoInfo) {
        return this.panoInfo
      }
    },
  },
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/styles/mixin.styl'
@import '../../../assets/styles/color.styl'

.pendant-newtpl
  left: 10px
  top: 20px
  color: $white
  z-index: 19
  .weather
    position: static
  .pano-desc
    max-width: 216px
    color: $white
    h3
      font-size: 15px
      line-height 30px
      text-shadow 0 0 10px rgba(0, 0, 0, 0.4)
    p
      font-size: 12px
      line-height 16px
      margin-top: 5px
      text-shadow 0 0 10px rgba(0, 0, 0, 0.4)
  .pendant-old
    bottom auto
  .extra
    display: flex
    line-height  30px
    color: #fff
    .item
      display: inline-block
      &.active
        .icon i
          color: $active
    .icon
      cursor: pointer
      padding-left:4px
</style>
